<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《原神》官网-踏入充满冒险的神奇世界</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/manga_index.css">
    <link data-n-head="true" rel="icon" type="image/x-icon" href="./images/tab.ico">
    <link rel="stylesheet" href="./icon/iconfont.css">
</head>

<body>
    <header class="clearfix">
        <div class="header_left">
            <div class="header_line"></div>
            <div class="header_one">
                <ul>
                    <li class="music">
                        <i class="star"></i>
                        <audio src="./video/BGM.mp3" autoplay controls style="display: none;"></audio>
                    </li>
                    <li>
                        <a href="#"><img src="./images/yuanshen_logo.png" alt=""></a>
                    </li>
                    <li class="as home"><a href="#">首页</a></li>
                    <li class="as news"><a href="#">新闻</a></li>
                    <li class="as Roles"><a href="#">角色</a></li>
                    <li class="as world"><a href="#">世界</a></li>
                    <li class="as manhua selecta"><a href="#">漫画</a></li>
                    <li class="as shequ"><a href="#">社区</a></li>
                </ul>
            </div>
        </div>
        <div class="header_right">
            <span>
                <a href="#" class="User">登&nbsp录</a>
                <img src="" alt="" class="iconfont icon-yonghu">
            </span>
        </div>
    </header>
    <!-- 登录 -->
    <div class="Sing_big clearfix">
        <div class="sign_logo"><img src="./images/MIlogo.png" alt=""></div>
        <div class="Sign clearfix">
            <strong class="close_nav">X</strong>
            <ul>
                <li class="message">短信登录</li>
                <li class="password" style="color: black;">密码登录</li>
            </ul>
            <div class="xian"></div>
            <div class="sign_nav clearfix">
                <div class="message_nav">
                    <input type="text" name="" id="telephone" class="telephone" maxlength="11" placeholder="手机号登录/注册">
                    <p id="tel_x"></p>
                    <span></span>
                    <input type="text" name="" id="account" class="telephone" maxlength="4" placeholder="验证码">
                    <p id="account_x"></p>
                    <i class="shu">|</i>
                    <input type="button" name="" id="" class="Verification" value="获取验证码">
                    <button class="login">登 录</button>
                    <a href="#" class="help">登录遇到问题？</a>
                    <a href="#" class="zc">注册</a>
                    <div class="fff">
                        <p>未注册的手机验证后将自动登录。注册/登录即代表您同意并遵守</p>
                        <a href="#">《米哈游通行证用户服务协议》</a>
                        <a href="#">《米哈游通行证用户个人信息及隐私保护政策》</a>
                    </div>
                </div>
                <div class="password_nav">
                    <input type="text" name="" id="telephone" class="telephone" maxlength="11" placeholder="手机号/邮箱/用户名">
                    <p id="tel_x"></p>
                    <span></span>
                    <input type="password" name="" id="account" class="telephone" maxlength="4" placeholder="密码">
                    <p id="account_x"></p>
                    <button class="login">登 录</button>
                    <a href="#" class="help">登录遇到问题？</a>
                    <a href="#" class="zc">注册</a>
                    <div class="fff">
                        <p>未注册的手机验证后将自动登录。注册/登录即代表您同意并遵守</p>
                        <a href="#">《米哈游通行证用户服务协议》</a>
                        <a href="#">《米哈游通行证用户个人信息及隐私保护政策》</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="manga_index">
        <div class="banner">
            <div class="banner_inner">
                <div class="banner_title">
                    漫画
                </div>
                <div class="banner_desc">
                    <p>这里是七种元素神灵信仰交汇的幻想世界提瓦特。 </p>
                    <p>席卷大陆的灾难终于停息，疮痍逐渐被抚平——本应到来的安宁却并没有如期光临风之城「蒙德」。</p>
                    <p>飞扬跋扈的组织「愚人众」借着保护的名义欺压诸国，而来自历史之暗的不祥也在等待着复仇的机会……</p>
                </div>
                <div class="banner_popover">
                    <a href="https://ys.mihoyo.com/main/manga/detail/184?mute=1" target="_blank" class="lastip">继续阅读</a>

                    <div class="banner_lastip" style="display: none;">
                        <p>序章 风之歌</p>
                        <img src="https://uploadstatic.mihoyo.com/contentweb/20190211/2019021117254254750.jpg">
                    </div>
                    <a href="https://ys.mihoyo.com/main/manga/detail/184?mute=1" target="_blank" style="background-color: #111;opacity: 0.75;">重新开始</a>

                </div>
            </div>



        </div>

        <article class="chapters">
            <ul class="chapters_list">
                <li class="chapters_item">
                    <a href="https://ys.mihoyo.com/main/manga/detail/184?mute=1" target="blank">
                        <img src="https://uploadstatic.mihoyo.com/contentweb/20190211/2019021117254254750.jpg" class="chapters__cover">
                        <div class="chapters_number">序章 风之歌</div>
                    </a>
                </li>
                <li class="chapters_item">
                    <a href="https://ys.mihoyo.com/main/manga/detail/191?mute=1" target="blank">
                        <img src="https://uploadstatic.mihoyo.com/contentweb/20190222/2019022216011312601.jpg" class="chapters__cover">
                        <div class="chapters_number">第一话 添酒</div>
                    </a>
                </li>
                <li class="chapters_item">
                    <a href="https://ys.mihoyo.com/main/manga/detail/192?mute=1" target="blank">
                        <img src="https://uploadstatic.mihoyo.com/contentweb/20190603/2019060316251096474.jpg" class="chapters__cover">
                        <div class="chapters_number">第二话 炎生</div>
                    </a>
                </li>
                <li class="chapters_item">
                    <a href="https://ys.mihoyo.com/main/manga/detail/198?mute=1" target="blank">
                        <img src="https://uploadstatic.mihoyo.com/contentweb/20190301/2019030116173638816.jpg" class="chapters__cover">
                        <div class="chapters_number">第三话 失物</div>
                    </a>
                </li>
                <li class="chapters_item">
                    <a href="https://ys.mihoyo.com/main/manga/detail/429?mute=1" target="blank">
                        <img src="https://uploadstatic.mihoyo.com/contentweb/20190603/2019060318381416927.jpg" class="chapters__cover">
                        <div class="chapters_number">第四话 变动</div>
                    </a>
                </li>
                <li class="chapters_item">
                    <a href="https://ys.mihoyo.com/main/manga/detail/438?mute=1" target="blank">
                        <img src="https://uploadstatic.mihoyo.com/contentweb/20190603/2019060316192842647.jpg" class="chapters__cover">
                        <div class="chapters_number">第五话 险地</div>

                    </a>
                </li>
                <li class="chapters_item">
                    <a href="https://ys.mihoyo.com/main/manga/detail/443?mute=1" target="blank">
                        <img src="https://uploadstatic.mihoyo.com/contentweb/20190603/2019060320042071824.jpg" class="chapters__cover">
                        <div class="chapters_number">第六话 风炎</div>
                    </a>
                </li>
                <li class="chapters_item">
                    <a href="https://ys.mihoyo.com/main/manga/detail/482?mute=1" target="blank">
                        <img src="https://uploadstatic.mihoyo.com/contentweb/20190606/2019060619293196512.jpg" class="chapters__cover">
                        <div class="chapters_number">第七话 尘匣</div>
                    </a>
                </li>
                <li class="chapters_item">
                    <a href="https://ys.mihoyo.com/main/manga/detail/810?mute=1" target="blank">
                        <img src="https://uploadstatic.mihoyo.com/contentweb/20190715/2019071514205278384.jpg" class="chapters__cover">
                        <div class="chapters_number">第八话 线索</div>
                    </a>
                </li>
                <li class="chapters_item">
                    <a href="https://ys.mihoyo.com/main/manga/detail/917?mute=1" target="blank">
                        <img src="https://uploadstatic.mihoyo.com/contentweb/20190809/2019080920201725912.jpg" class="chapters__cover">
                        <div class="chapters_number">第九话 游宴</div>
                    </a>
                </li>
                <li class="chapters_item">
                    <a href="https://ys.mihoyo.com/main/manga/detail/987?mute=1" target="blank">
                        <img src="https://uploadstatic.mihoyo.com/contentweb/20190909/2019090919255789106.jpg" class="chapters__cover">
                        <div class="chapters_number">第十话 愚戏</div>
                    </a>
                </li>
                <li class="chapters_item">
                    <a href="https://ys.mihoyo.com/main/manga/detail/1073?mute=1" target="blank">
                        <img src="https://uploadstatic.mihoyo.com/contentweb/20191011/2019101118561041414.jpg" class="chapters__cover">
                        <div class="chapters_number">第十一话 蛇音</div>
                    </a>
                </li>
                <li class="chapters_item">
                    <a href="https://ys.mihoyo.com/main/manga/detail/3476?mute=1" target="blank">
                        <img src="https://uploadstatic.mihoyo.com/contentweb/20191108/2019110819052956627.jpg" class="chapters__cover">
                        <div class="chapters_number">第十二话 心雾</div>
                    </a>
                </li>
                <li class="chapters_item">
                    <a href="https://ys.mihoyo.com/main/manga/detail/3756?mute=1" target="blank">
                        <img src="https://uploadstatic.mihoyo.com/contentweb/20191212/2019121219370494421.jpg" class="chapters__cover">
                        <div class="chapters_number">第十三话 再临</div>
                    </a>
                </li>
                <li class="chapters_item">
                    <a href="https://ys.mihoyo.com/main/manga/detail/6144?mute=1" target="blank">
                        <img src="https://uploadstatic.mihoyo.com/contentweb/20200117/2020011718393743302.jpg" class="chapters__cover">
                        <div class="chapters_number">第十四话 顽疾</div>
                    </a>
                </li>
                <li class="chapters_item">
                    <a href="https://ys.mihoyo.com/main/manga/detail/6477?mute=1" target="blank">
                        <img src="https://uploadstatic.mihoyo.com/contentweb/20200403/2020040312585640222.jpg" class="chapters__cover">
                        <div class="chapters_number">第十五话 落定</div>
                    </a>
                </li>
                <li class="chapters_item">
                    <a href="https://ys.mihoyo.com/main/manga/detail/6530?mute=1" target="blank">
                        <img src="https://uploadstatic.mihoyo.com/contentweb/20200417/2020041715102690915.jpg" class="chapters__cover">
                        <div class="chapters_number">第十六话 添酒</div>
                    </a>
                </li>
                <li class="chapters_item">
                    <img src="./images/blank.jpeg" alt="">

                </li>
            </ul>

        </article>
    </section>
    <footer class="footer">
        <ul class="footer_socialbar">
            <li class="footer_item weibo"></li>
            <li class="footer_item qq"></li>
            <li class="footer_item weixin"></li>
            <li class="footer_item share">
            </li>
        </ul>
        <div class="share_wrap">
            <p>分享至</p>
            <ul style="margin-left: 34px;">
                <li style="background-position: -74px -74px;"></li>
                <li style="background-position: -74px -10px;"></li>
                <li style="background-position: -138px -138px;"></li>
                <li style="background-position: -10px -138px;"></li>
            </ul>
        </div>
        <div id="footer_top">
            <div>
                <div class="mihoyo-cn-footer mihoyo-cn-footer-ys-mihoyo">
                    <div class="footer_content">
                        <div class="footer_logo">
                            <ul>
                                <li>
                                    <div style="display: flex; align-items: center;">
                                        <img src="./images/footer-mihoyo.png" style="width: auto;height: 42px;">
                                        <span></span>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <img src="./images/footer-logo.png" style="width: 110px;height: auto;">
                                    </div>
                                </li>
                            </ul>


                        </div>
                        <div class="footer_info">
                            <div class="footer_link">
                                <div class="footer_protocol">
                                    <div>
                                        <a href="https://ys.mihoyo.com/company/agreement" class="protocol" target="_blank">用户协议</a> |
                                        <a href="https://ys.mihoyo.com/company/privacy" class="protocol" target="_blank">隐私政策</a> |
                                        <a href="https://jiazhang.mihoyo.com/#/" class="protocol" target="_blank">家长监护工程</a> |
                                        <a href="http://www.mihayou.com/company.html" target="_blank" class="about-us protocol">关于我们</a> |
                                        <a href="http://www.mihayou.com/contact.html" target="_blank" class="contract-us protocol">联系我们</a> |
                                        <a href="http://www.mihayou.com/add.html" target="_blank" class="join-us protocol">加入我们</a>

                                    </div>
                                </div>

                            </div>

                            <div class="footer_advice">
                                <p class="advice_info">
                                    健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。
                                </p>
                                <div class="inline_info">
                                    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010402001113" class="footer-filing-item" target="_blank">沪公网安备31010402001113号</a>
                                    <span class="split_line"> | </span>
                                    <span class="footer_filing_item">增值电信业务经营许可证：沪B2-20190555</span>
                                </div>

                            </div>

                            <div class="footer_filing">
                                <div class="footer_filing_content">
                                    <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" class="footer-filing-item">沪ICP备19018275号-4</a>
                                    <span class="split_line"> | </span>
                                    <span> 沪网文〔2019〕3168-216号 </span>
                                    <span class="split_line"> | </span>
                                    <span>国新出审【2019】2978号</span>
                                </div>
                                <div class="footer_filing_tip">
                                    <span>互联网违法不良信息举报邮箱: tousu@mihoyo.com </span>
                                    <span>互联网违法不良信息举报电话: 021-34203135 （工作时间：每天10点 - 20点）</span>
                                </div>
                            </div>

                            <div class="footer-tip">
                                亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。
                            </div>

                            <div class="mihoyo-copyright">©2012-2020 上海米哈游影铁科技有限公司版权所有</div>

                            <div class="footer_icon">
                                <a href="https://v.yunaq.com/certificate?domain=www.mihoyo.com&amp;from=label&amp;code=90020" target="_blank"><img src="./images/footer-icon1.png" alt=""></a>
                                <a href="http://www.shjbzx.cn/" target="_blank"><img src="./images/footer-icon2.png" alt=""></a>
                                <a href="https://www.12377.cn/" target="_blank"><img src="./images/footer-icon3.png" alt=""></a>
                                <a href="http://sq.ccm.gov.cn/ccnt/sczr/service/business/emark/toDetail/8955A9DDE1FF8B6CE053010A14ACA87F" target="_blank"><img src="./images/footer-icon4.png" alt=""></a>
                                <a href="#" target="_blank"><img src="./images/footer-icon5.png" alt=""></a>
                                <a href="http://wap.scjgj.sh.gov.cn/businessCheck/verifKey.do?showType=extShow&serial=9031000020190314100540000004452331-SAIC_SHOW_310000-20200120150237277642&signData=MEYCIQCjn9IhIKfUHjPlx9W6xrYPZ4GA73Blopwp0iEzSX0OHQIhAOZm3tnlWLrgVXMtvgp5OibauIgiAa+2d+MQ7qzMIm6t"
                                    target="_blank"><img src="./images/footer-icon6.png" alt=""></a>

                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>

    </footer>


    <script src="./js/jquery.min.js"></script>
    <script>
        $(function() {
            $(".news").click(function() {
                $("body").children().eq(0).append(`<div class="loading"></div>`)
                setTimeout(function() {
                    window.location.href = "Home.html";
                }, 5000)
            })

            $(".news").click(function() {
                $("body").children().eq(0).append(`<div class="loading"></div>`)
                setTimeout(function() {
                    window.location.href = "News.html";
                }, 5000)
            })


            $(".Roles").click(function() {
                $("body").children().eq(0).append(`<div class="loading"></div>`)
                setTimeout(function() {
                    window.location.href = "Role.html";
                }, 5000)
            })


            $(".world").click(function() {
                $("body").children().eq(0).append(`<div class="loading"></div>`)
                setTimeout(function() {
                    window.location.href = "World.html";
                }, 5000)
            })

            $(".manhua").click(function() {
                $("body").children().eq(0).append(`<div class="loading"></div>`)
                setTimeout(function() {
                    window.location.href = "manga_index.html";
                }, 5000)
            })

            $('.banner_lastip').mouseover(function() {
                $('.banner_lastip').show()
            }).mouseout(function() {
                $('.banner_lastip').hide()
            })
            $('.lastip').mouseover(function() {
                $('.banner_lastip').fadeIn()
            }).mouseout(function() {
                var flag = $('.banner_lastip').show()
                if (!flag) {
                    $('.banner_lastip').fadeOut()
                }

            })


            $('.share_wrap').mouseover(function() {
                $('.share_wrap').show()
            }).mouseout(function() {
                $('.share_wrap').hide()
            })

            $('.share').mouseover(function() {
                $('.share_wrap').fadeIn()
            }).mouseout(function() {
                var flag = $('.share_wrap').show()
                if (!flag) {
                    $('.share_wrap').hide()
                }
            })
            $(".home").mousemove(function() {
                $(".header_line ").css("left", "460px")
            })

            $(".home").mouseout(function() {
                $(".header_line ").css("left", "802px")
            })
            $(".news").mousemove(function() {
                $(".header_line ").css("left", "545px")
            })

            $(".news").mouseout(function() {
                $(".header_line ").css("left", "802px")
            })


            $(".Roles").mousemove(function() {
                $(".header_line ").css("left", "630px")
            })

            $(".Roles").mouseout(function() {
                $(".header_line ").css("left", "802px")
            })


            $(".world").mousemove(function() {
                $(".header_line ").css("left", "715px")
            })

            $(".world").mouseout(function() {
                $(".header_line ").css("left", "802px")
            })


            $(".manhua").mousemove(function() {
                $(".header_line ").css("left", "802px")
            })

            $(".manhua").mouseout(function() {
                $(".header_line ").css("left", "802px")
            })

            $(".shequ").mousemove(function() {
                $(".header_line ").css("left", "888px")
            })

            $(".shequ").mouseout(function() {
                $(".header_line ").css("left", "802px")
            })
            var music = document.querySelector("audio");
            setTimeout(function() {
                music.play();
            }, 1000)
            $(document).ready(function() {
                music.play();
            })

            $(".music").click(function() {
                $(".music>i").toggleClass("stop");
                if (music.paused) {
                    music.play();

                } else {
                    music.pause();
                }
            })


            //登录触动变色
            $(".header_right span").mousemove(function() {
                $(".User").css("color", "white")
                $(".iconfont .icon-yonghu").css("color", "red")
            })

            $(".header_right span").mouseleave(function() {
                $(".User").css("color", "#ccc")
                $(".iconfont .icon-yonghu").css("color", "red")
            })


            // 线条移动
            $(".message").click(function() {
                $(".xian").css("left", "120px")
                $(".message_nav").show();
                $(".password_nav").hide();
                $(".message").css("color", " #ce965f")
                $(".password").css("color", "black")
            })

            $(".password").click(function() {
                $(".xian").css("left", "305px")
                $(".password_nav").show();
                $(".message_nav").hide();
                $(".password").css("color", " #ce965f")
                $(".message").css("color", "black")
            })


            //正则验证
            function phoneverification() {
                var phone = document.getElementById('telephone').value;
                if (!(/^1[34578]\d{9}$/.test(phone))) {
                    $("#telephone").css("color", "red")
                    $(".message_nav>span").text("*手机格式错误");
                    return false
                } else {
                    $("#telephone").css("color", "black")
                    $(".message_nav>span").text("");
                    return false
                }

                if (phone == "") {
                    $(".message_nav>span").text("*手机号不能为空");
                    return false
                }
            }

            // 输入框点击时动画
            $("#telephone").focus(function() {
                $("#tel_x").css("width", "296px");
                $("#account_x").css("width", "0px");
                var phone = document.getElementById('telephone').value;

                phoneverification();

            })

            // 输入框点击时动画
            $("#account").focus(function() {
                $("#tel_x").css("width", "0px");
                Verification
                $("#account_x").css("width", "296px");
                var phone = document.getElementById('telephone').value;

                phoneverification();
            })


            //登录按钮
            $(".login").click(function() {
                phoneverification();
            })

            //获取验证码
            var count = 60;
            $(".Verification").click(function() {
                //正则验证
                var phone = document.getElementById('telephone').value;
                if (!(/^1[34578]\d{9}$/.test(phone))) {
                    $("#telephone").css("color", "red")
                    $(".message_nav>span").text("*手机格式错误");
                    return false
                } else {
                    $("#telephone").css("color", "black")
                    $(".message_nav>span").text("");
                }

                if (phone == "") {
                    $(".message_nav>span").text("*手机号不能为空");
                    return false
                }

                //倒计时
                $(".Verification").attr("disabled", "disabled"); //点击一次不可再点
                var interval = setInterval(function() { //定义定时器
                    $(".Verification").val("已发送" + "(" + count + ")");
                    count--;
                    if (count == 0) {
                        clearInterval(interval); //清除定时器
                        $(".Verification").val("重新获取验证码");
                        $(".Verification").removeAttr("disabled"); //删除这个属性
                        count = 60;
                    }
                }, 1000);
            })


            $(".User").click(function() {
                $(".Sing_big ").show();
            })
            $(".close_nav").click(function() {
                $(".Sing_big").hide();
            })
        })
    </script>
</body>

</html>